<template>
  <div class="cus-add-docs-list-container">
    <div class="van-hairline--bottom">
      <van-field label="客户编号:" label-align="center" v-model="cusNumber" placeholder="请输入客户编号">
        <template #button>
          <van-button type="info" size="mini" @click="queryBtnClick">查询</van-button>
          <van-button type="primary" size="mini" @click="addBtnClick">添加</van-button>
        </template>
      </van-field>
    </div>
    <div class="list-container">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item-container van-hairline--bottom"
        @click="listItemClick(item)"
      >
        <div class="list-item-left-container">
          <div class="list-item-left">{{ item.cusFullName }}</div>
          <div class="list-item-left">{{ item.cusNumber }}</div>
        </div>
        <div class="list-item-center-container">
          <div class="list-item-center">{{ item.cusCategory | cusCategoryDict }}</div>
          <div class="list-item-center">{{ item.cusStatus | cusStatus }}</div>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="pageContainer">
      <van-pagination
        v-model="pageIndex"
        :total-items="total"
        :items-per-page="10"
        force-ellipses
        @change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { CellGroup, Field, Col, Row, Button, Pagination, Icon } from "vant";
import { mapActions, mapMutations } from "vuex";
export default {
  components: {
    [Field.name]: Field,
    [Col.name]: Col,
    [Row.name]: Row,
    [Button.name]: Button,
    [Pagination.name]: Pagination,
    [Icon.name]: Icon
  },
  data() {
    return {
      cusNumber: "",
      pageIndex: 1,
      total: 0,
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapMutations({
      setDocsDetail: "cusAddDocs/setDocsDetail",
      resetDocsDetail: "cusAddDocs/resetDocsDetail"
    }),
    ...mapActions({
      cusAddDocsQuery: "cusAddDocs/cusAddDocsQuery"
    }),
    getList() {
      this.cusAddDocsQuery({
        pageSize: 10,
        pageIndex: this.pageIndex,
        sortOrder: "asc",
        cusNumber: this.cusNumber
      })
        .then(res => {
          this.list = res.res;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    queryBtnClick() {
      this.pageIndex = 1;
      this.$nextTick(() => {
        this.getList();
      });
    },
    addBtnClick() {
      this.$router.push({
        name: "cusAddDocsDetail",
        query: {
          type: "add"
        }
      });
    },
    pageChange() {
      this.getList();
    },
    listItemClick(item) {
      console.log(item);
      this.setDocsDetail(item);
      this.$router.push({
        name: "cusAddDocsDetail",
        query: {
          type: "detail"
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cus-add-docs-list-container {
  background-image: linear-gradient(white, rgb(216, 231, 240));
  .list-container {
    .list-item-container {
      display: flex;
      align-items: center;
      margin: 4px 8px 14px 14px;
      font-size: 14px;
      .list-item-left-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        .list-item-left {
          padding: 0.2rem 0;
        }
      }
      .list-item-center-container {
        display: flex;
        flex-direction: column;
        width: 2rem;
        .list-item-center {
          padding: 0.1rem 0;
        }
      }
    }
  }
  .pageContainer {
    margin: 8px;
  }
}
</style>